<div>
  ngIf指令的demo
  =====================================
</div>
<button (click)="ifShow()">{{showContent? "隐藏":"显示"}}</button>
<div class="admin-controls" *ngIf="showContent" >
  The content you are looking for is here.
</div>
<div>

  ngFor指令的demo
  =====================================
</div>
<div *ngFor="let item of items">{{item.name}}</div>

<div>

  ngSwitch指令的demo
  =====================================
</div>
<div>
  <button name="head" [style]="btnStyle" (click)="currentItem.feature='head'" >head</button>
  <button  name="aside"  [style]="btnStyle"  (click)="currentItem.feature='aside'">aside</button>
  <button name="main"  [style]="btnStyle"  (click)="currentItem.feature='main'">main</button>
</div>
<div [ngSwitch]="currentItem.feature">
  <app-header   *ngSwitchCase="'head'"     [item]="currentItem"></app-header>
  <app-aside   *ngSwitchCase="'aside'"     [item]="currentItem"></app-aside>
  <app-main    *ngSwitchCase="'main'"   [item]="currentItem"></app-main>
  <app-unknow *ngSwitchDefault [item]="currentItem"></app-unknow>
</div>

<div>
  =====================================
</div>
<h1>Angular Router App</h1>
<nav>
  <ul>
    <li><a routerLink="/main-component" routerLinkActive="active" ariaCurrentWhenActive="page">main Component</a></li>
    <li><a routerLink="/aside-component" routerLinkActive="active" ariaCurrentWhenActive="page">aside Component</a></li>
  </ul>
</nav>
<!-- The routed views render in the <router-outlet>-->
<router-outlet></router-outlet>


<div>
  ng-container的demo=====================================
  与 *NgIf 和ngFor一起使用
</div>
<ul>
  <ng-container *ngFor="let item of items">
    <li *ngIf="item.flag">
      {{ item.name }}
    </li>
  </ng-container>
</ul>

<div>
  =====================================
  与ngTemplateOutlet一起使用
</div>

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'Hello'}">
</ng-container>

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'World'}">
</ng-container>

<ng-template #tmpl let-text>
  <h1>{{ text }}</h1>
</ng-template>

<p>Hip!</p>
<ng-template>
  <p>Hip!</p>
</ng-template>
<p>Hooray!</p>


<app-header>
  我是外部嵌入的内容
</app-header>

